<template>
    <ul class="soul-page">
        <li v-bind:class="{ previous, disabled : 1 == page.page_num }">
            <a v-on:click="getData(page.page_num-1)" href="javascript:;">上一页</a>
        </li>
        <li v-for="number in limitNumber" v-bind:class="{ active : number == page.page_num }">
            <a v-on:click="getData(number)" href="javascript:;">{{number}}</a>
        </li>
        <li v-bind:class="{ next, disabled : limitNumber[limitNumber.length-1] == page.page_num }">
            <a v-on:click="getData(page.page_num+1)" href="javascript:;">下一页</a>
        </li>
    </ul>
</template>
<script>
    export default{
        props: ['page'],
        computed: {
            limitNumber: function () {
                let pageNumbers = [];
                if (this.page.page_num > 5) {
                    for (let i = 4; i > 0; i--) {
                        pageNumbers.push(this.page.page_num - i);
                    }
                    pageNumbers.push(this.page.page_num);
                    for (let i = 1; i <= this.page.total_page-5; i++) {
                        pageNumbers.push(this.page.page_num + i);
                    }
                } else {
                    for (let i = 1; i <= this.page.total_page; i++) {
                        pageNumbers.push(i);
                    }
                }
                return pageNumbers;
            }
        },
        methods: {
            getData(number){
                if (number == 0){
                    return;
                }
                if (number > this.limitNumber[this.limitNumber.length-1]){
                    return;
                }
                this.$emit('paginationGetData', number);
            }
        }
    }
</script>
<style>
    .soul-page {
        width: 100%;
        overflow: hidden;
    }

    .soul-page > li {
        float: left;
        margin-right: 0.2rem;
    }

    .soul-page > li a {
        display: block;
        padding: 0.5rem 1rem;
        background-color: #fff;
        border: 1px solid #ddd;
        color: #333;
    }

    .soul-page > li a:hover {
        background-color: #19b5fe;
        border-color: #19b5fe;
        color: #fff;
    }

    .soul-page .disabled {
        color: #999;
        cursor: not-allowed;
    }

    .soul-page li.disabled a {
        color: #999;
        cursor: not-allowed;
    }

    .soul-page li.disabled a:hover {
        background-color: #fff;
        border: 1px solid #ddd;
    }

    .soul-page > li.active a {
        background-color: #19b5fe;
        border-color: #19b5fe;
        color: #fff;
    }
</style>